<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .list {

        }
        p{
            height: 50px;
            background-color: greenyellow;
        }
    </style>
    <script src="../lib/jquery/jquery.js"></script>
</head>

<body>

    <div class="list">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>21</p>
        <p>22</p>
        <p>23</p>
        <p>24</p>
        <p>25</p>
        <p>26</p>
        <p>27</p>
    </div>
</body>
<script>
    console.log("boby",$(document.body).height());
    console.log("list",$(".list").height());
    console.log("scrollTop",$(document.body).scrollTop());

    
    window.onscroll=function(){
          var height=$(".list").height()-$(document.body).height(); // 390
     var distanceBottom=height-$(document.body).scrollTop();
     if(distanceBottom<100){
         var arr=[];
         var length=$("p").length;
        for(var i=0;i<6;i++){
            arr.push("<p>"+(length+i+1)+"</p>");
        }
        $(".list").append(arr.join(''));
     }
    }

































  
</script>
</html>